<header id="hero" class="hero hero-buttons">
  <div class="l-under">
    <div class="arrow arrow-half arrow-dark arrow-top-left">
      <i class="icon-arrow-top-left"></i>
    </div>
    <div class="arrow arrow-half arrow-dark arrow-top-right">
      <i class="icon-arrow-top-right"></i>
    </div>
    <div class="arrow arrow-half arrow-dark arrow-bottom-left">
      <i class="icon-arrow-bottom-left"></i>
    </div>
    <div class="arrow arrow-half arrow-dark arrow-bottom-right">
      <i class="icon-arrow-bottom-right"></i>
    </div>
  </div>

  <div class="l-over">
    <i class="logo">B</i>
    <h1 class="logo-title">Buttons <sup>V. 2.0.0</sup></h1>

    <p class="hero-pitch">
      <strong>Buttons</strong> is a highly customizable production ready mobile web and desktop css button library. Buttons is free and open source.
    </p>

    <a class="hero-cta button button-plain button-uppercase button-rounded" href="css/buttons.css">Download</a>
  </div>


  <!-- BADGES -->
  <div class="hero-badge hero-mobile-badge" title="Desktop and Mobile Ready">
    <i class="fa fa-desktop"></i>
    <i class="fa fa-laptop"></i>
    <i class="fa fa-tablet"></i>
    <i class="fa fa-mobile"></i>
  </div>

  <a class="hero-badge hero-unicorn-badge" href="http://www.unicorn-ui.com">
    <i>U</i>
    <em>A Unicorn UI Module</em>
    <em>www.unicorn-ui.com</em>
  </a>
</header>
